<template>
  <div>
    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">卡号</div>
      <input type="text"
        v-model="card_no"
        placeholder="请输入会员卡号"
        class="zan-field__input zan-cell__bd"/>
    </div>
    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">密码</div>
      <input type="password"
        v-model="password"
        placeholder="请输入会员密码"
        class="zan-field__input zan-cell__bd"/>
    </div>
    <div class="zan-cell zan-field">
      <div class="btn" @click="submit">确认绑卡</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
import api from '@/utils/api'
export default {
  data () {
    return {
      card_no:'',
      password:''
    }
  },
  computed: {
    ...mapGetters([
      'login_info',
    ])
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.login_info || !this.login_info.brand_id||!this.login_info.openid) {
      // 用户未授权
      let url = 'get_user_info?callback_url=bind_member_card'
      wx.redirectTo({
        url: url
      })
      return
    }
  },
  methods: {
    async submit(){
      let form = {
        card_no: this.card_no,
        password: this.password,
        brand_id: this.login_info.brand_id,
        open_id: this.login_info.openid
      }
      let result = await api.bindCard(form)
      if (result == undefined) {
        wx.showToast({icon:'none',title:'绑卡失败！'})
        return
      }
      if(result.code == 0){
        wx.showToast({icon:'none',title:'绑卡成功！'})
        this.$store.dispatch("setUser",result.data)
        this.$store.dispatch("bindUserStatus",result.code)
        wx.navigateBack({
          delta: 1
        })
      }
    }
  }
}
</script>

<style >
.btn{
  height: 40px;
  line-height: 40px;
  width: 80%;
  color: white;
  text-align: center;
  background: black;
  border-radius: 50px;
  margin: 5px auto ;
}
</style>
